<!DOCTYPE html>
<html lang="zh-CN" style="overflow: hidden;" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{shared/layout.html}">

<head>
    <!--styles 样式-->
    <style type="text/css">
        html,
        body {
            background: #ffffff;
        }
    </style>
</head>

<body>

<th:block layout:fragment="body">
    <div class="m-20 hzyAdminForm" id="app" v-cloak>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-4">
                    <h4 class="example-title">编号</h4>
                    <input type="number" class="form-control" placeholder="请输入 编号" v-model="form.vm.model.num"
                           autocomplete="off"/>
                </div>
                <div class="col-sm-4">
                    <h4 class="example-title">会员名称</h4>
                    <input type="text" class="form-control" placeholder="请输入 会员名称" v-model="form.vm.model.name"
                           autocomplete="off"/>
                </div>
                <div class="col-sm-4">
                    <h4 class="example-title">联系电话</h4>
                    <input type="text" class="form-control" placeholder="请输入 联系电话" v-model="form.vm.model.phone"
                           autocomplete="off"/>
                </div>
                <div class="col-sm-4">
                    <h4 class="example-title">生日</h4>
                    <el-date-picker type="date" placeholder="请选择 生日" v-model="form.vm.model.birthday"
                                    format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"
                                    style="width:100%"></el-date-picker>
                </div>
                <div class='col-sm-4'>
                    <h4 class='example-title'>性别</h4>
                    <el-radio v-model="form.vm.model.sex" label="男">男</el-radio>
                    <el-radio v-model="form.vm.model.sex" label="女">女</el-radio>
                </div>
                <div class="col-sm-4">
                    <h4 class='example-title'>用户管理</h4>
                    <div class="input-group">
                        <input type="text" class="form-control" readonly="readonly" v-model="form.vm.user.name">
                        <div class="input-group-append">
                            <button type="button" class="btn btn-default btn-outline" @click="findBack_user()">
                                <i class="fas fa-search"></i>
                            </button>
                            <button type="button" class="btn btn-default btn-outline" @click="findBack_user(1)">
                                <i class="fas fa-trash-alt text-danger"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="col-sm-12">
                    <div class="row">
                        <div class="col-sm-6">
                            <h4 class="example-title">头像</h4>
                            <input type="file" @change="photoChange"/>
                            <br/>
                            <img width="150" class="rounded" :src="form.vm.model.photo"
                                 v-show="form.vm.model.photo"/>
                        </div>
                        <div class="col-sm-6">
                            <h4 class="example-title">文件</h4>
                            <input type="file" @change="fielsChange" multiple="multiple"/>
                            <ul class="list-group">
                                <li class="list-group-item" v-for="(item,index) in form.filesNames" :key="index">
                                    <a :href="item" target="_blank">{{item}}</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="col-sm-12">
                    <h4 class="example-title">备注</h4>
                    <div id="editor"></div>
                </div>
            </div>
            <div class="hzyAdminForm-footer">
                <div class="row">
                    <div class="col-sm-6"></div>
                    <div class="col-sm-6 text-right">
                        <button class="btn btn-primary" @click="save" :disabled="form.saveState"
                                v-if="power.save">保存
                        </button>
                        <button class="btn btn-danger" @click="closeWindow()">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <input type="hidden" th:value="${power}" id="power">
    <input type="hidden" th:value="${id}" id="formKey">
    <!--引入 wangEditor js-->
    <script src="/admin/libs/wangEditor.min.js"></script>
    <!--js 脚本-->
    <script type="text/javascript">
        let power = JSON.parse(document.getElementById("power").value);
        let formKey = document.getElementById("formKey").value;
        let app = new Vue({
            el: "#app",
            data: function () {
                return {
                    prefix: '/admin/member',
                    power,
                    form: {
                        saveState: false,
                        vm: {
                            id: formKey,
                            model: {},
                            user: {}
                        },
                        filePhoto: null,
                        files: [],
                        filesNames: [],
                    }
                }
            },
            created: function () {
            },
            mounted: function () {
                this.initEditor();
                this.loadForm();
            },
            methods: {
                loadForm: function () {
                    let _this = this;
                    let path = _this.prefix + '/find' + (_this.form.vm.id ? '/' + _this.form.vm.id :
                        '');

                    hzyAdmin.post(path, {}, function (r) {
                        if (r.code !== 1) return;
                        _this.form.vm = r.data;
                        //处理文件
                        if (_this.form.vm.model.filePath) {
                            _this.form.filesNames = _this.form.vm.model.filePath.split(',');
                        }
                        let introduce = _this.form.vm.model.introduce ? _this.form.vm.model.introduce.replace(/'/g, '\'') : "";
                        _this.editor.txt.html(introduce) // 重新设置编辑器内容
                    });
                },
                closeWindow: function (delay = 0) {
                    setTimeout(function () {
                        hzyAdmin.layer.close(hzyAdmin.layer.getFrameIndex(window.name));
                    }, delay);
                },
                save: function () {
                    let _this = this;
                    let path = _this.prefix + '/save';

                    //验证
                    if (!this.form.vm.model.name) return hzyAdmin.alert('角色名称不能为空!', '警告');

                    //组装数据
                    let formData = new FormData();
                    for (let key in this.form.vm.model) {
                        let value = this.form.vm.model[key];
                        if (!value) continue;
                        formData.append(key, value);
                    }

                    if (this.form.filePhoto) formData.append('filePhoto', this.form.filePhoto);

                    for (let i = 0; i < this.form.files.length; i++) {
                        let item = this.form.files[i];
                        formData.append('files', item);
                    }

                    this.form.saveState = true;
                    hzyAdmin.upload(path, formData, function (r) {
                        _this.form.saveState = false;
                        if (r.code === 1) {
                            hzyAdmin.alert('保存成功', '成功');
                            //关闭当前窗口
                            _this.closeWindow();
                        }
                    });
                },
                //查找带回
                findBack_user: function (isRemove) {
                    if (isRemove) {
                        //清空信息
                        this.form.vm.model.userId = '';
                        this.form.vm.user.name = '';
                        return;
                    }
                    //打开页面查找带回信息
                    let _this = this;
                    let path = "/admin/user/index?findback=1";

                    hzyAdmin.openPage('请选择用户', path, function (row) {
                        console.log('查找带回 行数据', row);
                        if (row == null) return;
                        _this.form.vm.model.userId = row._ukid;
                        _this.form.vm.user.name = row.name;
                    }, 1200, 1000);
                },
                /**
                 * 初始化 富文本编辑器
                 */
                initEditor: function () {
                    let t = this;
                    let E = window.wangEditor;
                    this.editor = new E('#editor');
                    // 设置编辑区域高度为 500px
                    this.editor.config.height = 400;
                    // 配置 onchange 回调函数
                    this.editor.config.onchange = function (newHtml) {
                        //console.log('change 之后最新的 html', newHtml)
                        t.form.vm.model.introduce = newHtml;
                    }
                    // 配置触发 onchange 的时间频率，默认为 200ms
                    this.editor.config.onchangeTimeout = 300 // 修改为 500ms

                    // 配置 server 接口地址
                    this.editor.config.uploadImgServer = "/upload/images";
                    this.editor.config.uploadFileName = "editorFileImages";
                    this.editor.config.uploadImgTimeout = 60 * 1000;

                    //创建
                    this.editor.create();
                },
                photoChange: function (e) {
                    let files = e.target.files;
                    if (files.length > 0) {
                        this.form.vm.model.photo = hzyAdmin.getObjectUrl(files[0]); //显示
                        this.form.filePhoto = files[0];
                    }
                },
                fielsChange: function (e) {
                    let files = e.target.files;
                    if (files.length > 0) {
                        //for (let i = 0; i < files.length; i++) {
                        //    let item = files[i];
                        //    this.form.FielsName.push(item.filename);
                        //}
                        this.form.files = files;
                    }
                },

            }
        });
    </script>
</th:block>

</body>

</html>